<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2>{{name}}</h2>
        <h3>{{age}}</h3>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '响应式与数据劫持',
                name: 'jack',
                age: 20,
                a: {
                    e: 1
                }
            }
        })

        //测试：后期vue实例动态的追加一些属性，会添加响应式处理吗？
        //目前来看，用过这种方式后期给vm追加的属性并没有添加响应式处理
        cm.$data.a.email = 'jack@126.com'

        //如果你相给后期追加的属性添加响应式处理的话，调用一下两个方法都可以
        //避免在运行时向vue实例或其根￥data添加响应式
        //不能直接给vm / vm.$data 追加响应式属性，只能在声明时提前定义号
        //Vue.set()  , vm.$set()
        //Vue.set(目标对象，属性名，属性值)
        //Vue.set(vm.$data.a, 'email','jack@126.com')
        //vm.$set(vm.a,'email','jack@456.com')
    </script>
</body>

</html>